<template>
    <div class="index_map_con" ref="indexMap"></div>
</template>

<script>
import China from '../../assets/js/China.json'
export default {
    data(){
        return{
            mapChina:[]
        }
    },
    created(){
        this.mapChina=China
    },
    mounted(){
        this.initMap()
    },
    methods:{
      initMap(){
        let mapEChart=this.$echarts.init(this.$refs.indexMap);
        var data = [{
                name: '北京',
                value: 24
            }, {
                name: '天津',
                value: 28
            }, {
                name: '上海',
                value: 88
            }, {
                name: '重庆',
                value: 4
            }, {
                name: '河北',
                value: 0
            }, {
                name: '河南',
                value: 108
            }, {
                name: '云南',
                value: 369
            }, {
                name: '辽宁',
                value: 8
            }, {
                name: '黑龙江',
                value: 0
            }, {
                name: '湖南',
                value: 86
            }, {
                name: '安徽',
                value: 0
            }, {
                name: '山东',
                value: 25
            }, {
                name: '新疆',
                value: 0
            }, {
                name: '江苏',
                value: 587
            }, {
                name: '浙江',
                value: 22
            }, {
                name: '江西',
                value: 0
            }, {
                name: '湖北',
                value: 55
            }, {
                name: '广西',
                value: 2
            }, {
                name: '甘肃',
                value: 4
            }, {
                name: '山西',
                value: 1
            }, {
                name: '内蒙古',
                value: 7
            }, {
                name: '陕西',
                value: 25
            }, {
                name: '吉林',
                value: 1
            }, {
                name: '福建',
                value: 40
            }, {
                name: '贵州',
                value: 0
            }, {
                name: '广东',
                value: 76
            }, {
                name: '青海',
                value: 0
            }, {
                name: '西藏',
                value: 0
            }, {
                name: '四川',
                value: 43
            }, {
                name: '宁夏',
                value: 1
            }, {
                name: '海南',
                value: 2
            },{
                name:'台湾',
                value:1881
            }]
        this.$echarts.registerMap('china', this.mapChina);
        let option = {
            tooltip: {
                triggerOn: "click",
            },
            visualMap: {
                left: 16,
                bottom: 40,
                showLabel: true,
                pieces: [{
                    gt: 100,
                    label: "> 100 人",
                    color: "#7f1100"
                }, {
                    gte: 80,
                    lte: 100,
                    label: "80-100 人",
                    color: "#ff5428"
                }, {
                    gte: 60,
                    lte: 80,
                    label: "60-80 人",
                    color: "#ed6d3d"
                }, {
                    gt:40,
                    lte: 60,
                    label: "40-60 人",
                    color: "#ff8c71"
                }, {
                    gt: 20,
                    lte: 40,
                    label: "20-40 人",
                    color: "#ffd768"
                }, {
                    gt: 10,
                    lte: 20,
                    label: "10-20 人",
                    color: "#fddea5"
                }, {
                    gt: 0,
                    lte: 10,
                    label: "< 10 人",
                    color: "#fff1cf"
                },
                {
                    value:0,
                    color:'#fbfbfb'
                }],
                show: true,
                textStyle:{
                    color:'#24C2FF'
                },
            },
            geo: {
                map: 'china',
                zoom: 1.2,
                label: {
                    show: true,
                    color: '#000000'  
                },
                roam: false,
                itemStyle: {
                    areaColor: '#fbfbfb',
                    borderColor: '#3399FF',
                },
                emphasis: {
                    itemStyle:{
                        areaColor: '#CC9933'
                    }
                        
                }
            },
            series: [{
                name:'现有确诊病例',
                type: 'map',
                geoIndex: 0,
                data: data
            }]
        };
        mapEChart.setOption(option);
      }
    }
    
}
</script>


<style lang="less" scoped>

.index_map_con{
    width: 890px;
    height: 440px;
}

</style>